<script setup lang="tsx">
import { MessagePlugin } from 'tdesign-vue-next';
import { useLoading } from '~/store/manager/loading';

// 定义页面布局
definePageMeta({
    layout: 'manager'
})

// store
const loadingStore = useLoading();

// 用户列表表格数据
const tableData = ref([]);
// 用户列表表格显示列
const tableDataColumns = [
    {
        colKey: 'uid',
        title: 'GID'
    },
    {
        colKey: 'status',
        title: '状态',
        cell: (h: any, { row }) => (
            <div class="group-status">
                <t-tag shape="round" theme={row.status === 0 ? 'success' : 'danger'} variant="light-outline">
                    {row.status === 0 ? '正常' : '禁用'}
                </t-tag>
            </div>
        ),
    },
    {
        colKey: 'username',
        title: '用户名'
    },
    {
        colKey: 'phone',
        title: '手机号码'
    },
    {
        colKey: 'group[0].title',
        title: '用户组'
    },
    {
        colKey: 'opearate',
        title: '操作',
        cell: (h: any, { row }) => (
            <div class="group-operate">
                <t-space direction="vertical"></t-space>
                <t-space>
                    <t-button theme="success" shape="square" size="small" variant="base" onClick={() => {
                        // 设置表单类型为编辑
                        createForm.value = false;
                        formData.content = { ...row };
                        // 显示表单对话框
                        showForm.value = true;
                    }}><t-icon name="edit" /></t-button>
                    <t-popconfirm content={row.status === 0 ? '确认禁用吗？' : '确认启用吗'} onConfirm={() => onConfirm(row)}>
                        <t-button theme={row.status === 0 ? 'danger' : 'primary'} shape="square" size="small" variant="base"><t-icon name={row.status === 0 ? 'close' : 'check'} /></t-button>
                    </t-popconfirm>
                </t-space>
            </div>
        ),
    }
]
// 用户列表分页信息
const tablePagination = reactive({
    defaultCurrent: 1,
    defaultPageSize: 10,
    total: 0
})
// 表格分页切换
const changeTablePage = (pageInfo: any, newData: any) => {
    // 请求数据
    get_user_list({ flag: 'table', page: pageInfo.current, size: pageInfo.pageSize }).then((res: any) => {
        tableData.value = res.data.list;
        tablePagination.defaultCurrent = res.data.page;
        tablePagination.defaultPageSize = res.data.size;
        tablePagination.total = res.data.total;
    }).catch((err) => {
        console.log(err);
    })
}
// 禁用/启用用户
const onConfirm = (row: any) => {
    // 发送网络请求
    user_status({ uid: row.uid }).then((res: any) => {
        MessagePlugin.success({
            content: res.message
        })
        // 刷新页面
        __initialize();
    }).catch((err) => {
        console.log(err);
    })
}

// 表单信息
const showForm = ref(false);
const createForm = ref(true);
const formTitle = ref('新增');
const groupList = ref([]);
const formData = reactive({
    content: {
        flag: 'manager',
        uid: 0,
        status: 0,
        username: '',
        phone: '',
        password: '',
        repassword: '',
        gid: ''
    }
})

// 新增按钮点击事件
const showFormHandle = () => {
    showForm.value = true;
}

// 表单事件
// 重置表单事件
const resetFormData = () => {
    let tmpData = {
        flag: 'manager',
        uid: 0,
        status: 0,
        username: '',
        phone: '',
        password: '',
        repassword: '',
        gid: ''
    };
    formData.content = tmpData;

    createForm.value = true;
}
// 表单关闭事件
const close = () => {
    // 清空表单数据
    resetFormData();
}
// 表单提交事件
const onConfirmAnother = () => {
    // 判断操作
    if (createForm.value) {
        formData.content.flag = 'manager';
    } else {
        formData.content.flag = 'update';
    }
    // 发起网络请求
    create_user(formData.content).then((res: any) => {
        MessagePlugin.success({
            content: res.message
        })
        // 隐藏表单
        showForm.value = false;
        // 重置表单
        resetFormData();
        // 刷新页面
        __initialize();
    }).catch((err) => {
        console.log(err);
    })
}

// 计算属性及监视器
watch(createForm, (value, oldValue) => {
    if (value) {
        formTitle.value = '新增';
    } else {
        formTitle.value = '编辑';
    }
})

// 页面初始化事件
const __initialize = () => {
    // 获取所有用户组
    get_group_list({ flag: 'normal' }).then((res: any) => {
        groupList.value = res.data
    }).catch((err) => {
        console.log(err);
    })

    // 获取用户列表
    get_user_list({ flag: 'table', page: tablePagination.defaultCurrent, size: tablePagination.defaultPageSize }).then((res: any) => {
        tableData.value = res.data.list;
        tablePagination.defaultCurrent = res.data.page;
        tablePagination.defaultPageSize = res.data.size;
        tablePagination.total = res.data.total;
    }).catch((err) => {
        console.log(err);
    })
}

// 页面入口
onMounted(() => {
    __initialize();
})

</script>
<template>
    <div class="user-container">
        <div class="toolbar mb-[30px]">
            <t-card>
                <t-row>
                    <t-col :span="3">
                        <div class="add-button">
                            <t-button theme="primary" @click="showFormHandle">
                                <template #icon><t-icon name="add" /></template>
                                新建
                            </t-button>
                        </div>
                    </t-col>
                    <t-col :span="3"></t-col>
                    <t-col :span="3"></t-col>
                    <t-col :span="3"></t-col>
                </t-row>
            </t-card>
        </div>
        <div class="table-box">
            <t-card>
                <t-table row-key="uid" :data="tableData" :columns="tableDataColumns" :stripe="true" :bordered="false"
                    :hover="true" table-layout="auto" size="medium" :pagination="tablePagination" :show-header="true"
                    :loading="loadingStore.getTableLoading" cell-empty-content="-" lazy-load
                    :onPageChange="changeTablePage">
                </t-table>
            </t-card>
        </div>
        <client-only>
            <div class="form-box">
                <t-dialog v-model:visible="showForm" :header="formTitle" width="40%" :confirm-on-enter="true"
                    :closeOnOverlayClick="false" :on-close="close" :on-confirm="onConfirmAnother">
                    <t-space direction="vertical" style="width: 100%">
                        <div>
                            <t-form>
                                <t-form-item label="用户名" name="username">
                                    <t-input placeholder="请输入用户名称" v-model="formData.content.username" />
                                </t-form-item>
                                <t-form-item label="状态" name="status">
                                    <t-radio-group v-model="formData.content.status">
                                        <t-radio-button :value="0">启用</t-radio-button>
                                        <t-radio-button :value="1">禁用</t-radio-button>
                                    </t-radio-group>
                                </t-form-item>
                                <t-form-item label="手机号码" name="phone">
                                    <t-input placeholder="请输入手机号码" v-model="formData.content.phone" />
                                </t-form-item>
                                <t-form-item label="登录密码" name="password">
                                    <t-input :placeholder="createForm ? '请输入登录密码' : '不更改密码请留空'"
                                        v-model="formData.content.password" />
                                </t-form-item>
                                <t-form-item label="重复密码" name="repassword">
                                    <t-input :placeholder="createForm ? '请再次输入密码' : '不更改密码请留空'"
                                        v-model="formData.content.repassword" />
                                </t-form-item>
                                <t-form-item label="用户组" name="gid">
                                    <t-select v-model="formData.content.gid">
                                        <t-option v-for="(item, index) in groupList" :key="item.gid" :label="item.title"
                                            :value="item.gid" />
                                    </t-select>
                                </t-form-item>
                            </t-form>
                        </div>
                    </t-space>
                </t-dialog>
            </div>
        </client-only>
    </div>
</template>
<style scoped></style>
